<template>
    <div>
        <van-search
        v-model="value"
        show-action
        input-align="center"
        :placeholder=placeholder
        @search="onSearch"
        @cancel="onCancel"
        @input="searchtap"
        />
          <div class="search-r">
            <span>历史搜索</span>
            <van-cell v-for="(item,index) in searchResultTap" :key="index" :title="item" @click="particulars(item)">
                <template #right-icon>
                    <van-icon name="cross" class="search-icon"  @click.stop="deletea(index)"  />
                </template>
            </van-cell>
            <p @click="alldelete" v-show="searchResultTap.length!=0">清空历史记录</p>
            <!-- {{searchResultTap}} -->
        </div>
        <div class="search-but" v-show="value.trim().length">
            <li v-for="item in searchres" :key="item._id" @click="details(item.title)">{{item.title}}</li>
        </div>
    </div>
</template>

<script>
let timeID=null
import { Search } from 'vant';
import { Cell, CellGroup } from 'vant';
import { Icon } from 'vant';
export default {
    name: 'WorkspaceJsonSearch',

    data() {
        return {
            value: '',
            searchres:[],
            searchResultTap:[],
             placeholder:'燕子没有你怎么活',
        };
    },
    components:{
       [Search.name]:Search,
       [Cell.name]:Cell,
       [CellGroup.name]:CellGroup,
       [Icon.name]:Icon,
    },
    mounted() {
        let searchResultTap=localStorage.getItem('searchResultTap')
        if(searchResultTap){
            this.searchResultTap=JSON.parse(searchResultTap)
        }
    },

    methods: {
        // 确认
           onSearch(val) {
          val=val.trim()
          if(val==''){
            return this.details(this.placeholder)
          }
          this.details(val)
        },
        // 搜索
         searchtap(val){
            if(!val.trim()==''){
                clearTimeout(timeID)
                timeID=setTimeout(()=>{
                    console.log(val);
                    this.skip=0;
                    this.limit=20
                    this.$http.post('/api/search',{
                        key_word:val,
                        limit:20
                    })
                    .then(res=>{
                        console.log(res);
                        if(res.code==0){
                            this.searchres=res.data
                        }
                    })
                },500)
            }
           
            
        },
        // 取消
        onCancel() {
          this.$router.go(-1)
        },
         // 历史记录
        details(title){
            title=title.trim()
            let index=this.searchResultTap.findIndex(v=>v===title)
            console.log(index);
            if(index>=0){
                this.searchResultTap.splice(index,1)
            }
            this.searchResultTap.unshift(title)
            console.log(this.searchResultTap);
            localStorage.setItem('searchResultTap',JSON.stringify(this.searchResultTap))
            this.$router.push({
                path:'/SearchResults',
                query:{
                    title
                }
            })
            
        },
        // 删除记录
        deletea(index){
            this.searchResultTap.splice(index,1)
            console.log(this.searchResultTap);
            localStorage.setItem('searchResultTap',JSON.stringify(this.searchResultTap))
        },
        // 全部删除
        alldelete(){
            this.searchResultTap=[]
            localStorage.setItem('searchResultTap',[])
        },
        // 详情
        particulars(title){
            this.details(title)
            console.log(title);
            this.$router.push({
                path:'/SearchResults',
                query:{
                    title
                }
            })
        }
    },
};
</script>

<style lang="scss" scoped>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
  .search-r{
    margin-top: 10px;
    background-color: #eee;
    span{
        padding-left: 13px;
        font-size: 15px;
        color: #8b8989;
        
    }
    p{
        margin-top: 3px;
        font-size: 14px;
        color: #777;
        text-align: center;
    }
  }
   .search-but{
    position: fixed;
    left: 0;
    right: 0;
    top: 54px;
    bottom: 0;
    overflow-y: auto;
    background-color: #f4f4f4;
    z-index: 999;
    li{
        list-style: none;
        padding: 10px 0px;
        margin: 0 10px;
        border-bottom: 1px solid pink;
    }
   }   
</style>